import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, DatePicker, message, Button, Timeline } from 'antd';
import { findStubAppointmentList, getStubAppointmentDetailInfo } from "../../fetch/fetchApi";
import GridTable from '../../components/display/gridTable';
import locale from "antd/lib/date-picker/locale/zh_CN";
import moment from 'moment';
const {RangePicker} = DatePicker;

let isInitPagination = false;
const startDefaultDate = moment().subtract(7, 'days');
const endDefaultDate = moment();
const subscribeStatus = {
    "1": "申请中",
    "2": "桩主拒绝预约",
    "3": "预约成功",
    "4": "车主取消预约",
    "5": "超时失效",
    "6": "已充电",
    "7": "已过期"
}
class SubscribeOrder extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            gridData: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10',
            startTime: startDefaultDate.format("YYYY-MM-DD"),
            endTime: endDefaultDate.format("YYYY-MM-DD")
        };
        this.tableColumns = [
            {
                title: '预约用户',
                dataIndex: 'account',
                key: 'account'
            }, {
                title: '预约时段',
                dataIndex: 'time',
                key: 'time',
                render: (text) => (
                    <Tooltip placement="topLeft" title={text}>
                        {text}
                    </Tooltip>
                )
            }, {
                title: '预约时间',
                dataIndex: 'createTime',
                key: 'createTime',
            }, {
                title: '当前状态',
                dataIndex: 'statusStr',
                key: 'statusStr',
            }, {
                title: '订单记录',
                dataIndex: 'operation',
                key: 'operation',
                fixed:'right',
                render: (text, record) => (
                    <a href="#" onClick={() => this.showDetailModal({
                        id: record.key
                    })}>查看</a>
                )
            }
        ];
    }

    showDetailModal = (params = {}) => {
        this.setState({
            subscribeDetailVisible: true,
            spinning: true
        })
        getStubAppointmentDetailInfo({
            id: params.id
        }).then((res) => {
            if (!res) {
                return;
            }
            console.log(res);
            if (res.data.code === "200") {
                this.setState({
                    timeJson: {
                        applyTime: res.data.data.applyTime,
                        approveTime: res.data.data.approveTime,
                        startTime: res.data.data.startTime,
                        endTime: res.data.data.endTime
                    },
                    spinning: false
                })
            }

        })
    }

    findStubAppointmentList = (params = {}) => {
        this.setState({
            loading: true
        })
        findStubAppointmentList(this.query).then((res) => {
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = params.current || 1;
            if (!isInitPagination) {
                isInitPagination = true;
                pagination.onChange = (page, pageSize) => {
                    this.query["page"] = page;
                    this.query["pagecount"] = pageSize;
                    this.findStubAppointmentList({
                        current: page
                    });
                }
            }
            this.setState({
                gridData: res.data.data,
                loading: false
            });
        });
    }

    handleChange = (dates) => {
        const startDate = dates[0];
        const endDate = dates[1];
        if (!startDate || !endDate) {
            this.query.startTime = null;
            this.query.endTime = null;
            this.setState({
                rangeValue: null
            });
            return;
        }
        if (endDate.diff(startDate, 'days') > 7) {
            message.error('查询时间只能在7天以内');
            this.query.startTime = null;
            this.query.endTime = null;
            this.setState({
                rangeValue: null
            });
        } else {
            this.query.startTime = startDate.format("YYYY-MM-DD");
            this.query.endTime = endDate.format("YYYY-MM-DD");
            this.setState({
                rangeValue: dates
            });
        }
    }

    queryHandler = (e) => {
        this.findStubAppointmentList();
    }

    componentDidMount() {
        this.setState({
            rangeValue: [startDefaultDate, endDefaultDate]
        })
        for (let param in this.props.params) {
            this.query[param] = this.props.params[param];
        }
        this.findStubAppointmentList();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params.stubId !== this.props.params.stubId) {
            this.query.startTime = startDefaultDate.format("YYYY-MM-DD");
            this.query.endTime = endDefaultDate.format("YYYY-MM-DD");
            for (let param in nextProps.params) {
                this.query[param] = nextProps.params[param];
            }
            this.query["page"] = 1;
            this.setState({
                rangeValue: [startDefaultDate, endDefaultDate]
            })
            this.findStubAppointmentList();
        }
    }

    handleSubDetailModalCancel =() => {
        this.setState({
            subscribeDetailVisible: false
        })
    }

    render() {
        return (
            <div className="sc-page-content">
                <div className="page-toolbar">
                    <Row gutter={8}>
                        <Col lg={8} xl={8}>
                            <RangePicker format="YYYY-MM-DD" locale={locale} value={this.state.rangeValue} onChange={this.handleChange} />
                        </Col>
                        <div  className="button-inlineBlock">
                            <Button type="primary" onClick={this.queryHandler}>查询</Button>
                        </div>
                    </Row>
                </div>

                <div className="page-panel">
                    <GridTable postyle="table-center" data={this.state.gridData} loading={this.state.loading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>

                <Modal visible={this.state.subscribeDetailVisible} footer={null} onCancel={this.handleSubDetailModalCancel}>
                    <Spin tip="Loading..." spinning={this.state.spinning}>
                        <Timeline>
                            <Timeline.Item color={(this.state.timeJson && this.state.timeJson.applyTime) ? "green" : "red"}>
                                <span>{this.state.timeJson && this.state.timeJson.applyTime || "--"}</span>
                                <p>用户预约</p>
                            </Timeline.Item>
                            <Timeline.Item color={(this.state.timeJson && this.state.timeJson.approveTime) ? "green" : "red"}>
                                <span>{this.state.timeJson && this.state.timeJson.approveTime || "--"}</span>
                                <p>预约成功</p>
                            </Timeline.Item>
                            <Timeline.Item color={(this.state.timeJson && this.state.timeJson.startTime) ? "green" : "red"}>
                                <span>{this.state.timeJson && this.state.timeJson.startTime || "--"}</span>
                                <p>用户充电</p>
                            </Timeline.Item>
                            <Timeline.Item color={(this.state.timeJson && this.state.timeJson.endTime) ? "green" : "red"}>
                                <span>{this.state.timeJson && this.state.timeJson.endTime || "--"}</span>
                                <p>充电完成</p>
                            </Timeline.Item>
                        </Timeline>
                    </Spin>
                </Modal>
            </div>
        )
    }
}
export default SubscribeOrder;
